body{
    background-color: pink;
}
$highlight-color: #f90    

//在sass当中定义变量是以$开头,在less当中定义变量以@开头
//全局变量
//引入文件
import './var.scss';
$basic-border: 1px solid black;
$nav-color: #F90;
#app {
    background-color:  $highlight-color;
    border: $basic-border
}     
nav {
    //局部变量
    $width: 100px;
    width: $width;
    color: $nav-color;
    background-color: black
}
//嵌套语法
#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        //父选择器
        //a:hover对a标签本身
        &:hover { color: red }
        //a :hover对a标签子元素
        // :hover { color: red }
      }
      //含义:a标签(本身)悬浮样式
    //   a:hover{ color: red}
      //含义:a标签子元素悬浮样式
    //   a :hover{ color: red}
    }
    aside { background-color: #f90 }
}